import { CSSProperties, useEffect, useRef, useState } from "react";
import SubTitle from "@/components/subTitle";
import FirstTitle from "@/components/FirstTitle";

import { Carousel } from "antd";
import { getCode } from "@/api/codeApi.ts";
import Code from "@/components/code";
import EffectContainer from "@/components/effectContainer";

import Glide from "@glidejs/glide";
import "@glidejs/glide/dist/css/glide.core.min.css";
import "@glidejs/glide/dist/css/glide.theme.min.css";
import "./index.scss";
import { LeftOutlined, RightOutlined } from "@ant-design/icons";
import { Description } from "@/components/description";

const contentStyle: CSSProperties = {
  height: "200px",
  color: "#fff",
  lineHeight: "200px",
  textAlign: "center",
  background: "#364d79",
  borderRadius: "5px",
};

const CarouselMap = () => {
  const [antdCode, setAntdCode] = useState("");
  const [glideCode, setGlideCode] = useState("");
  const [glideCss, setGlideCss] = useState("");
  const glide: any = useRef(null);
  // antd的轮播图
  useEffect(() => {
    getCode("/carouselMap/antd轮播图.txt").then(({ data }) => {
      setAntdCode(data);
    });
  }, []);

  // glide的轮播图
  useEffect(() => {
    getCode("/carouselMap/glide轮播图.txt").then(({ data }) => {
      setGlideCode(data);
    });
    getCode("/carouselMap/glide轮播图css.txt").then(({ data }) => {
      setGlideCss(data);
    });
    if (glide.current) {
      new Glide(glide.current, {
        type: "carousel", // 是否跳转第一个 是slider 否carousel
        focusAt: "center", // 选择第几个
        startAt: 1, //从第几个开始
        perView: 3, // 显示多少个dom
        gap: 15, // 间隔
        // autoplay: 2000, // 自动播放
        hoverpause: true,
        keyboard: true,
      }).mount();
    }
  }, [glide]);

  return (
    <>
      <FirstTitle title="轮播图" />

      <Description info={"Antd 轮播图"}></Description>

      <SubTitle title="antd 效果" />
      <EffectContainer
        effect={
          <>
            <Carousel autoplay>
              <div>
                <h3 style={contentStyle}>1</h3>
              </div>
              <div>
                <h3 style={contentStyle}>2</h3>
              </div>
              <div>
                <h3 style={contentStyle}>3</h3>
              </div>
              <div>
                <h3 style={contentStyle}>4</h3>
              </div>
            </Carousel>
          </>
        }
        code={<Code content={antdCode}></Code>}
      ></EffectContainer>
      <Description info={"glide 轮播图"}></Description>

      <SubTitle title="glide 效果" />

      <EffectContainer
        effect={
          <div className="glide" ref={glide}>
            <div className="glide__track" data-glide-el="track">
              <ul className="glide__slides">
                <li className="glide__slide">
                  <div className="book">1</div>
                </li>
                <li className="glide__slide">
                  <div className="book">2</div>
                </li>
                <li className="glide__slide">
                  <div className="book">3</div>
                </li>
                <li className="glide__slide">
                  <div className="book">4</div>
                </li>
                <li className="glide__slide">
                  <div className="book">5</div>
                </li>
              </ul>
            </div>
            <div className="control" data-glide-el="controls">
              <button className="left" data-glide-dir="<">
                <LeftOutlined />
              </button>
              <button className="right" data-glide-dir=">">
                <RightOutlined />
              </button>
            </div>
          </div>
        }
        code={<Code content={glideCode}></Code>}
        css={<Code content={glideCss} type="css"></Code>}
      ></EffectContainer>
    </>
  );
};
export default CarouselMap;
